<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录页</title>
    <link href="../c/base.css" rel="stylesheet" type="text/css">
    <link href="../c/toefl.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../j/jQuery.js"></script>


</head>

<body>
<div class="doc1180">

    <div class="header">
        <div class="logo"><a href="####"><img src="../i/logo.png"></a></div>
        <div class="headerLink">
        	<a class="###" href="/toTeacherLogin">教师登录</a>
            <a class="###" href="/toLogin">用户登录</a>
            <a class="###" href="/toRegister">用户注册</a>
        </div>
    </div>
</div>
<div class="menu">
    <div class="doc1180">
        <div class="menuLink">
            <ul class="fn-clear">
                <li><a href="/">首页</a></li>
                <li><a href="###">托福人</a></li>
                <li><a href="###">公开课</a></li>
                <li><a href="###">群组聊</a></li>
                <li><a href="toCastle">福利城堡</a></li>
            </ul>
        </div>
        <div class="fenxiang">
            <a href="#" class="weibo"><img src="../i/weibo.png"></a>
            <a href="#" class="weixin"><img src="../i/weixin.png"></a>
        </div>
    </div>
</div>
<div class="doc1180">

    <div class="login">
        <form action="login" method="post" id="loginForm">
            <div class="login_left">
                <h3 class="login_h3">欢迎学生登录人人托福</h3>
                <div class="login_sr"><input type="text" class="login_inputYhm" placeholder="用户名" name="login_name"   th:value="${n}"></div>
                <div class="login_sr"><input type="text" class="login_inputMm" placeholder="密码" name="password"></div>
                <div class="login_sr fn-clear"><input name="" type="text" class="login_inputYzm" placeholder="验证码" >
                    <div class="login_inputYzmPic"><canvas id="canvas" width="100" height="43"></canvas></div>
                    <a href="###" class="login_inputYzmH" onclick="changeC()">看不清，还一张</a></div>
                <div class="login_xieyi"><input name="" type="checkbox" value=""
                                                style="margin-right:10px; vertical-align:middle;">我同意<a href="###">《人人托福网服务协议》</a>
                </div>
                <div><a  class="login_Button" onclick="loginSub()">登录</a></div>
                <div class="login_zcymm"><a href="/toRegister">注册帐号</a><a href="###" class="login_zhmm">找回密码</a></div>
            </div>
            </form>
                <div class="login_right">
                    <div class="login_rightH3">您也可以使用以下方式登录：</div>
                    <div class="login_sanfang"><a href="###"><img src="../i/login_wb.png">新浪微博</a></div>
                    <div class="login_sanfang"><a href="###"><img src="../i/login_qq.png">QQ登录</a></div>
                    <div class="login_sanfang"><a href="###"><img src="../i/login_qw.png">腾讯微博</a></div>
                    <div class="login_sanfang"><a href="###"><img src="../i/login_rr.png">人人网</a></div>
                    <div class="login_shouquan">授权后表明你已同意 <a href="###">《人人托福网服务协议》</a></div>
                </div>
    </div>

</div>
<div class="flink">
    <div class="flinkTop"></div>
    <div class="flinkBody">
        <h3>友情链接</h3>
        <ul>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
            <li>友情连接友情连接</li>
        </ul>
    </div>
</div>
<div class="footer">
    <div class="doc1180">
        <div class="footerLink">
            <a href="###">人人托福</a>|
            <a href="###">联系我们</a>|
            <a href="###">招聘信息</a>|
            <a href="###">合作媒体</a>|
            <a href="###">意见反馈</a>|
            <a href="###">版权说明</a>
        </div>
        <div class="footerTxet">©2014 – xuanke.com All rights reserved. 京ICP备14022672号-1</div>
    </div>
</div>
<script type="text/javascript">
    $(function (){
        draw(show_num);
    })

    var show_num = [];
    function changeC(){
        draw(show_num);
    }
    function  loginSub() {
        var val = $(".login_inputYzm").val().toLowerCase();
        var num = show_num.join("");
        if(val==''){
            alert('验证码为空！');
            draw(show_num);
            $(".login_inputYzm").focus();
        }else if(val == num){

            $(".login_inputYzm").val('');
            draw(show_num);
            $("#loginForm").submit();
        }else{
            alert('验证码错误！请重新输入！');

            $(".login_inputYzm").val('');
            draw(show_num);

        }

    }





    function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象
        var context = canvas.getContext("2d");//获取到canvas画图的环境
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

</script>
</body>
</html>
